<template>
  <div>
    <el-dialog
      title="数据导入"
      :visible.sync="visible"
      width="40%"
      :before-close="handleClose"
      class="import-dialog"
    >
      <div class="tc">
        <p>请按照标准模版格式进行导入</p>
        <el-button plain class="mt-10" @click="download">点击下载模板</el-button>
      </div>
      <div class="mt-20">
        <h4>导入excel</h4>
        <div class="mt-10">
          <UploadFile @getFile="getFile" :importData="importData" />
        </div>
      </div>
      <!-- <el-checkbox v-model="checked" class="mt-20">不导入重复数据（请在上传文件前选择是否勾选此项）</el-checkbox>
      <h4 class="mt-20">请选择导入数据类型</h4>
      <el-radio-group v-model="radio" class="mt-10">
        <el-radio :label="3">历史数据</el-radio>
        <el-radio :label="6">非历史数据</el-radio>
      </el-radio-group>-->
      <div class="tips-wrap pd-10 mt-20">
        <p>注意事项：</p>
        <ol class="fs-12">
          <li>1.所上传的文件必须严格按照模板来填写</li>
          <li>2.导入的文件最大支持15M以内</li>
          <li>3.按照类型导入，下载模板时是什么类型。导入的时候也需要对应类型</li>
        </ol>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :disabled="files.length==0" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导入进度 -->
    <Progress
      :visible="progressShow"
      :progressStatus="progressStatus"
      :progressFalse="progressFalse"
      :importData="importData"
      @getProgressShow="getProgressShow"
      @finishProgress="finishProgress"
    />
    <!-- 导入结果 -->
    <Result
      :result="result"
      :visible="resultShow"
      :importData="importData"
      @getResultShow="getResultShow"
    />
  </div>
</template>

<script>
import request from "@/utils/request";
import axios from "axios";
import dayjs from "dayjs";
import Result from "./components/Result";
import Progress from "./components/Progress";
import UploadFile from "./components/UploadFile";
import { openDownloadDialog, outPutForArray } from "@/utils/outPutExcel";
export default {
  components: { Result, Progress, UploadFile },
  props: ["visible", "importData"],
  data() {
    return {
      progressShow: false, // 进度显示组件
      progressStatus: false, // 进度状态
      progressFalse: false, // 失败
      resultShow: false, // 结果页
      submiting: false,
      checked: false,
      radio: 3,
      files: [],
      baseURL: process.env.VUE_APP_BASE_API,
      result: {
        successlist: [],
        errList: []
      } //导入成功结果
    };
  },
  methods: {
    handleClose() {
      this.$emit("closeImport", false);
    },
    // 导入文件
    getFile(files) {
      this.files = files;
    },
    // 进度组件显示与关闭
    getProgressShow(val) {
      this.progressShow = val;
    },
    // 结果页组件显示与关闭
    getResultShow(val) {
      this.resultShow = val;
      this.progressStatus = false;
    },
    // 进度完成状态
    finishProgress(val) {
      this.progressStatus = val;
      this.$nextTick(_ => {
        this.progressShow = false;
        this.resultShow = true;
      });
    },
    // 下载文档
    downRequst() {
      let index = window.location.href.indexOf('#')
      let url = window.location.href.substring(0,index-1) + this.importData.fileUrl;
      return request({
        url,
        method: "get",
        responseType: "blob"
      });
    },
    // 下载
    download() {
      this.downRequst().then(res => {
        openDownloadDialog(res, this.importData.excelName + "导入模板.xlsx");
      });
    },
    // 上传
    submit() {
      if (this.submiting) return;
      const formData = new FormData();
      formData.append("file", this.files[0].raw, this.files[0].raw.name);
      this.submiting = true;
      this.progressShow = true;
      this.importData["importUrl"](formData)
        .then(res => {
          this.submiting = false;
          this.result = res.data;
          this.progressStatus = true;
          // this.handleClose();
        })
        .catch(err => {
          this.submiting = false;
          this.progressShow = false;
          this.$message.error(err.msg);
        });
    }
  }
};
</script>

<style lang='scss' scoped>
@import "styles/variables.scss";
.tips-wrap {
  background-color: #f2f2f2;
  ol {
    li {
      margin: 10px 0;
      color: $fontGray;
    }
  }
}
</style>
<style lang="scss">
.import-dialog {
  .el-dialog__body {
    padding: 20px 30px;
  }
}
</style>
